<div class="header-container header-sticky" xmlns:th="http://www.thymeleaf.org" th:fragment="top_header">
    <div class="navigation-menu-top pt-15 pt-md-15 pb-md-15 pt-sm-15 pb-sm-15">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6 col-lg-2 col-md-6 col-sm-6 order-1 order-lg-1">
                    <div class="logo">
                        <a href="/home">
                            <img src="/index/images/logo.png" class="img-fluid" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-8 visible-md visible-lg order-3 order-lg-2">
                </div>
                <!-- 没有登录就登录-->
                <!----否则显示用户信息--->
                <div class=" col-6 col-lg-2 col-md-6 col-sm-6 order-2 order-lg-3" th:if="${loginInfo} == null">
                    <div class="minicart-section">
                        <a href="/login">
                            <span class="image"><i class="icon ion-md-log-in"></i></span>
                            <h5>登 录</h5>
                        </a>
                    </div>
                </div>
                <div th:if="${loginInfo} != null" class="col-6 col-lg-2 col-md-6 col-sm-6 order-1 order-lg-1">
                    <div class="minicart-section">
                        <a href="#" id="cart-icon">
                            <span class="image">
                                <img style="width: 46px;height: 46px;border-radius: 50%;"
                                     th:src="${loginInfo.getUser().getAvatar()}"
                                     th:alt="${loginInfo.getUser().getUserName()}"/>
                            </span>
                            <h5>
                                <th:block th:text="${loginInfo.getUser().getUserName()}"/>
                                <i class="fa fa-angle-down"></i>
                            </h5>
                        </a>
                        <div class="cart-floating-box" id="cart-floating-box" style="display: none;">
                            <div class="single-feature d-flex">
                                <div class="content">
                                    <h3 th:if="${loginInfo.getUser().getIsAdmin()}">
                                        <a href="/admin/home">
                                            <i style="font-size: 20px;color: #f5675f" class="icon ion-md-magnet"></i>
                                            管理后台
                                        </a>
                                    </h3>
                                    <h3>
                                        <a href="/article/create">
                                            <i style="font-size: 20px;color: #7ad19f"
                                               class="icon ion-md-add-circle"></i>
                                            新建文章
                                        </a>
                                    </h3>
                                    <h3>
                                        <a href="/article/resource">
                                            <i style="font-size: 20px;color: #e0a800"
                                               class="icon ion-md-cloud-upload"></i>
                                            上传资源
                                        </a>
                                    </h3>
                                    <h3>
                                        <a th:href="'/user/' + ${loginInfo.getUser().getUserSeq()}">
                                            <i style="font-size: 20px;color: #b2f870" class="icon ion-md-home"></i>
                                            个人主页
                                        </a>
                                    </h3>
                                </div>
                            </div>
                            <div class="cart-calculation">
                                <div class="floating-cart-btn text-center">
                                    <a class="fl-btn pull-left"
                                       th:href="'/manage/' + ${loginInfo.getUser().getUserSeq()}">个人管理</a>
                                    <a class="fl-btn pull-right" href="/login/out">登 出</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navigation-menu">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-2 col-md-2 col-sm-4">
                    <div class="hero-side-category">
                        <div class="category-toggle-wrap">
                            <button class="category-toggle">
                                <i class="fa fa-bars"></i>
                                分类
                            </button>
                        </div>
                        <nav class="category-menu">
                            <ul>
                                <li th:each="category:${pageService.getCategories()}">
                                    <a th:href="'/classify/' + ${category.name}">[[${category.name}]]</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8">
                    <div class="main-menu">
                        <nav>
                            <ul>
                                <li>
                                    <a href="/home/">
                                        <i class="icon icon-home"></i>
                                        首页
                                    </a>
                                </li>
                                <li>
                                    <a href="/hot/">
                                        <i class="icon icon-list-alt"></i>
                                        热度榜
                                    </a>
                                </li>
                                <li>
                                    <a href="/classify/">
                                        <i class="icon icon-tags"></i>
                                        分类导航
                                    </a>
                                </li>
                                <li>
                                    <a href="/open/">
                                        <i class="icon icon-desktop"></i>
                                        开源推荐
                                    </a>
                                </li>
                                <li>
                                    <a href="/download/">
                                        <i class="icon icon-cloud-download"></i>
                                        下载榜
                                    </a>
                                </li>
                                <li>
                                    <a href="/user/">
                                        <i class="icon icon-group"></i>
                                        用户榜
                                    </a>
                                </li>
                                <li>
                                    <a href="/data/">
                                        <i class="icon icon-database"></i>
                                        公开数据
                                    </a>
                                </li>
                                <li>
                                    <a href="/about/">
                                        <i class="icon icon-cubes"></i>
                                        关于
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    <div style="padding: 17px 2px;">
                        <div class="input-group">
                            <div class="input-control search-box search-box-circle has-icon-right">
                                <input type="text" class="form-control search-input"
                                       style="padding-right:0;"
                                       placeholder="搜索">
                                <label class="input-control-icon-left search-icon"></label>
                            </div>
                            <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">搜索</button>
                        </span>
                        </div>
                        <div class="search-display">
                            <ul>
                                <li>1</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-12 d-block d-lg-none">
                    <div class="mobile-menu"></div>
                </div>
            </div>
        </div>
    </div>
</div>